<template>
  <div class="new_block_container">
    <div class="title">
      <img src="../../assets/common/l_title_2.png" alt="">
    </div>
    <div class="new_block_thead">
      <span>区块高度</span>
      <span>交易哈希</span>
    </div>
    <div class="new_block_txt">
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <ul class="scroll_con">
          <li v-for="(item,index) in listData" :key="index">
            <span v-text="item.title" /><span v-text="item.date" />
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第三行无缝滚动第三行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第四行无缝滚动第四行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第五行无缝滚动第五行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第六行无缝滚动第六行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第七行无缝滚动第七行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第八行无缝滚动第八行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第九行无缝滚动第九行',
        'date': '2017-12-16'
      }]
    }
  },
  computed: {

    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }

  }

}
</script>

<style lang="less" scoped>
.new_block_container{
    height: 320px;
    background: url('../../assets/common/l_item_2.png') no-repeat;
    background-size: 100%;
    margin: 12px 0;
    .title{
        padding: 18px 0 14px 34px;
    }
    .new_block_thead{
        width: 384px;
        height: 28px;
        line-height: 28px;
        padding-left:16px ;
        margin: 0 24px;
        background-color: #092B43;
        span{
               color: #16A7A3;
               font-size: 14px;
               &:last-child{
                   margin-left: 120px;
               }

        }
    }
    .new_block_txt{
        width: 100%;
        height: 239px;
        overflow: hidden;
        .scroll_con{
            overflow: hidden;
            height: 100%;
            padding: 0 40px;
            li{
                display: flex;
                justify-content: space-between;
                color: #1FFCE5;
                font-size: 14px;
                line-height: 32px;
            }
        }
    }

}

</style>

